<template>
	<div class="navbar" :style="{
	  background: heads.headBgColor,
	  height: heads.headHeight,
	  lineHeight: heads.headHeight
	}">
	  <div class="title-menu" :class="{ 'left-aligned': heads.headTitleStyle === '1' }">
		<el-image 
		  v-if="heads.headTitleImg"
		  class="title-img dynamic-img"
		  :style="{
			width: heads.headTitleImgWidth,
			height: heads.headTitleImgHeight,
			'box-shadow': heads.headTitleImgBoxShadow,
			'border-radius': heads.headTitleImgBorderRadius
		  }"
		  :src="heads.headTitleImgUrl"
		  fit="cover">
		</el-image>
		<div class="title-name dynamic-title" :style="{
		  color: heads.headFontColor,
		  fontSize: heads.headFontSize
		}">
		  {{ $project.projectName }}
		</div>
	  </div>
	  
	  <div class="right-menu">
		<div class="user-info dynamic-user" :style="{
		  color: heads.headUserInfoFontColor,
		  fontSize: heads.headUserInfoFontSize
		}">
		  <i class="el-icon-user"></i>
		  {{ $storage.get('role') }} {{ $storage.get('adminName') }}
		</div>
		<div 
		  class="logout-btn dynamic-logout"
		  :style="{
			color: heads.headLogoutFontColor,
			fontSize: heads.headLogoutFontSize
		  }"
		  @click="onLogout">
		  <i class="el-icon-switch-button"></i>
		  退出登录
		</div>
	  </div>
	</div>
  </template>
<script>
	export default {
		data() {
			return {
				dialogVisible: false,
				ruleForm: {},
				user: {},
				heads: {"headLogoutFontHoverColor":"rgba(255, 255, 255, 1)","headFontSize":"28px","headUserInfoFontColor":"rgba(0, 0, 0, 1)","headBoxShadow":"0 0px 0px #444","headTitleImgHeight":"44px","headLogoutFontHoverBgColor":"var(--publicSubColor)","headFontColor":"rgba(0, 0, 0, 1)","headTitleImg":false,"headHeight":"60px","headTitleImgBorderRadius":"22px","headTitleImgUrl":"http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg","headBgColor":"radial-gradient(circle, #FFFFFF 0%, var(--publicMainColor) 100%)","headTitleImgBoxShadow":"0 1px 6px #444","headLogoutFontColor":"rgba(0, 0, 0, 1)","headUserInfoFontSize":"16px","headTitleImgWidth":"44px","headTitleStyle":"2","headLogoutFontSize":"16px"},
			};
		},
		created() {
			this.setHeaderStyle()
		},
		mounted() {
			let sessionTable = this.$storage.get("sessionTable")
			this.$http({
				url: sessionTable + '/session',
				method: "get"
			}).then(({
				data
			}) => {
				if (data && data.code === 0) {
					this.user = data.data;
					this.$storage.set('userid',data.data.id);
				} else {
					let message = this.$message
					message.error(data.msg);
				}
			});
		},
		methods: {
			onLogout() {
				console.log("logout")
				let storage = this.$storage
				let router = this.$router
				storage.clear()
				router.replace({
					name: "login"
				});
			},
      			onIndexTap(){
      				window.location.href = `${this.$base.indexUrl}`
    			},
			setHeaderStyle() {
			  this.$nextTick(()=>{
			    document.querySelectorAll('.navbar .right-menu .logout').forEach(el=>{
			      el.addEventListener("mouseenter", e => {
			        e.stopPropagation()
			        el.style.backgroundColor = this.heads.headLogoutFontHoverBgColor
					el.style.color = this.heads.headLogoutFontHoverColor
			      })
			      el.addEventListener("mouseleave", e => {
			        e.stopPropagation()
			        el.style.backgroundColor = "transparent"
					el.style.color = this.heads.headLogoutFontColor
			      })
			    })
			  })
			},
		}
	};
</script>


<!-- <style lang="scss" scoped>
	.navbar {
		height: 60px;
		line-height: 60px;
		width: 100%;
		padding: 0 34px;
		box-sizing: border-box;
		background-color: #ff00ff;
		position: relative;
		z-index: 111;
		
		.right-menu {
			position: absolute;
			right: 34px;
			top: 0;
			height: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			z-index: 111;
			
			.user-info {
				font-size: 16px;
				color: red;
				padding: 0 12px;
			}
			
			.logout {
				font-size: 16px;
				color: red;
				padding: 0 12px;
				cursor: pointer;
			}
			
		}
		
		.title-menu {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			height: 100%;
			
			.title-img {
				width: 44px;
				height: 44px;
				border-radius: 22px;
				box-shadow: 0 1px 6px #444;
				margin-right: 16px;
			}
			
			.title-name {
				font-size: 24px;
				color: #fff;
				font-weight: 700;
			}
		}
	}
	// .el-header .fr {
	// 	float: right;
	// }

	// .el-header .fl {
	// 	float: left;
	// }

	// .el-header {
	// 	width: 100%;
	// 	color: #333;
	// 	text-align: center;
	// 	line-height: 60px;
	// 	padding: 0;
	// 	z-index: 99;
	// }

	// .logo {
	// 	width: 60px;
	// 	height: 60px;
	// 	margin-left: 70px;
	// }

	// .avator {
	// 	width: 40px;
	// 	height: 40px;
	// 	background: #ffffff;
	// 	border-radius: 50%;
	// }

	// .title {
	// 	color: #ffffff;
	// 	font-size: 20px;
	// 	font-weight: bold;
	// 	margin-left: 20px;
	// }
</style> -->
<style scoped>
.navbar {
  display: flex;
  /* width: 100%; */
  justify-content: space-between;
  padding: 0 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  z-index: 0;
}

.title-menu {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}

.title-menu.left-aligned {
  justify-content: flex-start;
}

.title-img {
  transition: transform 0.3s ease;
}

.title-img:hover {
  transform: rotate(-5deg) scale(1.05);
}

.title-name {
  font-family: 'Microsoft YaHei', sans-serif;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
}

.right-menu {
  display: flex;
  align-items: center;
  gap: 25px;
  position: relative;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.dynamic-title {
  position: relative;
  padding-left: 10px;
}

.dynamic-title::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 2px;
  background: currentColor;
  opacity: 0.3;
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 15px;
  }
  
  .title-name {
    font-size: 0.9em;
  }
  
  .user-info,
  .logout-btn {
    font-size: 0.85em;
    padding: 6px 12px;
  }
}
</style>